<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">

			<view class="home-page-top">

				<view class="tis-li">
					<view class="face">
						<image :src="(userData.avatarImg==null||userData.avatarImg=='')?'../../../static/user.png':serverUrl+userData.avatarImg"></image>
					</view>
					<view class="info">
						<view class="name">
							<label>{{userData.realName}}</label>
						</view>
						<view class="org">{{userData.workUnitCurrent==null?"":userData.workUnitCurrent}}</view>
					</view>
				</view>
				<view class="home-button">
					<button>关注</button>
					<button @click="siliao()">私信</button>
				</view>
			</view>

			<view class="echartsIn">
				<mpvue-echarts lazyLoad :echarts="echarts" :onInit="radarInit" ref="echarts" canvasId="radar" />
			</view>

		</view>
		<view>
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
				 @tap="tabChange">{{cate.name}}</view>
			</scroll-view>
			<view v-if="cateCurrentIndex==0" class="grace-left-padding-wrap">
				<label class="grace-list">
					<text class="grace-list-text">真实姓名</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.realName==null?"":userData.realName}}</text>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">所在机构</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.workUnitCurrent==null?"":userData.workUnitCurrent}}</text>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">邮箱</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.email==null?"":userData.email}}</text>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">最高学历</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.education==null?"":userData.education}}</text>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">职称</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.professional==null?"":userData.professional}}</text>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">感兴趣主题</text>
					<view>
						<text class="grace-list-text grace-list-mr">{{userData.favouriteSubject==null?"":userData.favouriteSubject}}</text>
					</view>
				</label>

			</view>
			<view v-if="cateCurrentIndex==1">
				<!-- 圈子内容区 -->
				<view v-for="(item, index) in socialMain" :key="index">
					<view class="grace-news-list" style="padding:10upx 25upx; width:700upx;" @click="goSocialDetail(item.id)">
						<view class="social-banner">
							<view class="social-banner-img">
								<image :src="(item.avatarImg==null||item.avatarImg=='')?'../../../static/user.png':serverUrl+item.avatarImg"
								 mode="widthFix"></image>
							</view>
							<view class="social-banner-text">
								<text class="text-nickname">
									{{item.author}}
								</text>
								<block v-if="item.memberCertification==1">
									<image src="../../../static/v.png" style="width: 35upx; height: 35upx;" />
								</block>
								<view class="text-description">
									<text>{{item.timehour}} {{item.place}}</text>
								</view>
							</view>
						</view>
						<view class="grace-news-list-img-news">
							<view class="grace-news-list-title-main">
								<text @click.stop="goTopicDetail(item.topicId)" class="main-topic">{{item.topicTitle}}</text>
								<label>{{item.content}}</label>
							</view>
							<view class="grace-news-list-two">
								<block v-for="(image,k) in item.images" :key="k">
									<image :v-if="image!=''" :src="serverUrl+image" :data-src="serverUrl+image" :data-index="index" @click.stop="previewImage"
									 mode="widthFix"></image>
								</block>
							</view>
							<!-- 资源卡片 -->
							<view v-if="item.resource!=undefined" class="grace-news-list-items" style="width:94%; padding:5px 3%;"
							 @click.stop="goShareDetail(item.resource.data[0].type[0],item.resource.data[0].id[0],item.resource.data[0].title[0])">
								<image :src="item.resource.data[0].cover[0]==null||item.resource.data[0].cover[0]==''?'../../../static/l2.png':serverUrl+item.resource.data[0].cover[0]"
								 class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
								<view class="grace-news-list-title">
									<view class="grace-news-list-title-main">{{item.resource.data[0].title[0]}}</view>
									<text class="grace-news-list-title-desc grace-text-overflow">{{item.resource.data[0].author[0]}}
										{{item.resource.data[0].create_time_str[0]}}</text>
								</view>
							</view>
						</view>
						<view class="grace-rows">
							<view class="grace-items grace-rows-li grace-center">
								<image src="../../../static/zhuanfa.png" mode="widthFix"></image>
								<text class="li-text">转发</text>
							</view>
							<view class="grace-items grace-rows-li grace-center" @click.stop="goSocialDetail(item.id)">
								<image src="../../../static/pinglun.png" mode="widthFix"></image>
								<text class="li-text">评论</text>
							</view>
							<view class="grace-items grace-rows-li grace-center" @click.stop="editSocialMain(item.id,index)">
								<image src="../../../static/dianzan.png" mode="widthFix"></image>
								<block v-if="item.likeCount==0">
									<text class="li-text">点赞</text>
								</block>
								<block v-else="">
									<text class="li-text">{{item.likeCount}}</text>
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="cateCurrentIndex==2" class="grace-news-list" style="width:94%; padding:5px 3%;">
				<view v-for="(item, index) in literatureAll" :key="index" @click="goLiteratureDetail(index)">
					<view class="grace-news-list-items grace-bg">
						<view class="grace-news-list-title">
							<view class="grace-news-list-title-main">{{index+1}}. {{item.title}}</view>
							<text class="grace-news-list-title-desc grace-text-overflow">作者: {{item.author}}</text>
							<text class="grace-news-list-title-desc grace-text-overflow">{{item.create_time_str}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <view v-if="cateCurrentIndex==3">
				待定
			</view> -->

		</view>
		<view style="text-align:center;margin-top:10px;" v-show="dataShow">数据为空</view>
		
	</view>
</template>
<script>
	import * as echarts from '../../../threeComponents/echarts/echarts.min.js';
	import mpvueEcharts from '../../../threeComponents/echarts/echarts.vue';

	import {
		mapState,
		mapMutations
	} from 'vuex';

	function getRadarOption(radarData) {
		return {
			radar: [{
				name: {
					show: true,
					formatter: null,
					textStyle: {
						//设置颜色
						color: '#fff',
						fontSize: 12
					}
				},
				indicator: [{
						text: '学术贡献度',
						max: 100
					},
					{
						text: '学术影响力',
						max: 100
					},
					{
						text: '社区贡献度',
						max: 100
					},
					{
						text: '社区活跃度',
						max: 100
					},
					{
						text: '学者互动性',
						max: 100
					},
					{
						text: '用户粘合度',
						max: 100
					}
				],
				radius: 47

			}],
			series: [{
				type: 'radar',
				tooltip: {
					trigger: 'item'
				},
				itemStyle: {
					normal: {
						areaStyle: {
							type: 'default'
						}
					}
				},
				data: [{
					value: radarData,
					name: '学者指数'
				}]
			}]
		}
	}


	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		components: {
			mpvueEcharts
		},
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				serverUrl: this.serverUrl,
				id: "",
				userData: {},
				radarData: [],
				categories: [{
						name: "我的资料"
					},
					{
						name: "学者动态"
					},
					{
						name: "学术成果"
					}
					// 					{
					// 						name: "学者指数"
					// 					}
				],
				cateCurrentIndex: 0,
				socialMain: [],
				literatureAll: [],
				echarts,
				page: 1,
				dataShow: false,
			};
		},
		onLoad: function(e) {
			this.id = e.id;
			this.getMemberHome();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			this.page = 1;
			this.socialMain = [];
			this.literatureAll = [];
			if (this.cateCurrentIndex == 1) {
				this.getSocialMain();
			}
			if (this.cateCurrentIndex == 2) {
				this.getLiterature();
			}
		},
		// 加载更多
		onReachBottom: function() {
			if (this.cateCurrentIndex == 1) {
				this.getSocialMain();
			}
			if (this.cateCurrentIndex == 2) {
				this.getLiterature();
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			radarInit: function(canvas, width, height) {
				let radarChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(radarChart)
				radarChart.setOption(getRadarOption(this.radarData))
				return radarChart
			},
			siliao() {
				if(this.hasLogin){
					uni.navigateTo({
						url: "/pages/general/im/im?obj="+encodeURIComponent(JSON.stringify(this.userData))
					})
				}else{
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/general/im/im&obj="+encodeURIComponent(JSON.stringify(this.userData))
					})
				}

			},
			goSocialDetail(id) {
				uni.navigateTo({
					url: "/pages/social/detail/detail?id=" + id,
				})
			},
			goTopicDetail(id) {
				uni.navigateTo({
					url: "../../social/topic-detail/topic-detail?id=" + id,
				})
			},
			goLiteratureDetail(index) {
				let obj = {
					id: this.literatureAll[index].id,
					type: "qklw",
					title: this.literatureAll[index].title,
					author: this.literatureAll[index].author,
					create_time_str: this.literatureAll[index].create_time_str,
					cover: this.literatureAll[index].cover
				}
				uni.navigateTo({
					url: "/pages/search/detail/detail?obj=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getMemberHome: function() {
				uni.request({
					url: this.serverUrl + 'user-api/getMemberHome',
					data: {
						id: this.id
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.userData = r.data.data.member;
							this.radarData = r.data.data.radarData;
							this.$refs.echarts.init();
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				});
			},
			getSocialMain: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getSocialMainByUsername',
					data: {
						username: this.userData.username,
						pageNumber: this.page,
						pageSize: 5,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.socialMain.length < 1) {
									this.dataShow = true;
								} else {
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							} else {
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								var datobj = {
									id: r.data.data[i].id,
									author: r.data.data[i].memberName,
									avatarImg: r.data.data[i].memberAvatarImg,
									place: r.data.data[i].createLocation,
									images: r.data.data[i].submitImages == null ? "" : r.data.data[i].submitImages.split(";"),
									timehour: r.data.data[i].createTime.substring(11),
									timeday: r.data.data[i].createTime.substring(0, 10),
									likeCount: r.data.data[i].likeCount,
									content: r.data.data[i].content,
									topicId: r.data.data[i].topicId,
									topicTitle: r.data.data[i].topicTitle == undefined ? "" : "#" + r.data.data[i].topicTitle + "#",
									resource: r.data.data[i].resource,
								};
								this.socialMain = this.socialMain.concat(datobj);
							}
							this.page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			editSocialMain(id, index) {
				var num = 1; //1或-1
				uni.request({
					url: this.serverUrl + 'user-api/editSocialMain',
					data: {
						id: id,
						likeCount: num
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.socialMain[index].likeCount = this.socialMain[index].likeCount + num;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				});
			},
			//预览图片#
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var index = e.target.dataset.index;
				var imgList = [];
				for (var i = 0; i < this.socialMain[index].images.length; i++) {
					imgList.push(this.serverUrl + this.socialMain[index].images[i]);
				}
				uni.previewImage({
					current: current,
					urls: imgList
				})
			},
			getLiterature: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'search-api/search',
					data: {
						query: "$type:qklw AND " + this.userData.claimExpression,
						showFields: "id;title;cover;summary;ly;create_time_str;author",
						sortField: "create_time=desc",
						pageNum: this.page,
						pageSize: 7,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.literatureAll.length < 1) {
									this.dataShow = true;
								} else {
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							} else {
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.data.length; i++) {
								var datobj = {
									id: r.data.data.data[i].id,
									cover: r.data.data.data[i].cover == null ? "../../../static/zhaopian.png" : r.data.data.data[i].cover,
									title: r.data.data.data[i].title,
									author: r.data.data.data[i].author,
									create_time_str: r.data.data.data[i].create_time_str,
								};
								this.literatureAll = this.literatureAll.concat(datobj);
							}
							this.page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				this.cateCurrentIndex = index;
				// 重置分页及数据 
				this.socialMain = [];
				this.literatureAll = [];
				this.page = 1;
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				if (this.cateCurrentIndex == 1) {
					this.getSocialMain();
				}
				if (this.cateCurrentIndex == 2) {
					this.getLiterature();
				}
			}
		}
	}
</script>

<style>
	.header {
		background-color: #417dc9;
		height: 68vw;
	}

	.home-page-top {
		display: flex;
		flex-direction: row;
	}

	.tis-li {
		margin-left: 40upx;
		display: flex;
		width: 65%;
	}

	.home-button {
		width: 215upx;
		height: 60upx;
		line-height: 60px;
	}

	.home-button button {
		display: initial;
		padding: 0;
		height: 40upx;
		line-height: 40upx;
		padding: 15upx;
		margin: 5upx;
		font-size: 28upx;
		color: #fff;
		background-color: #00B26A;
	}

	.tis-li .face {
		flex-shrink: 0;
		width: 130upx;
		height: 130upx;
	}

	.tis-li .face image {
		width: 100%;
		height: 100%;
		border-radius: 100%
	}

	.tis-li .info {
		display: flex;
		flex-flow: wrap;
		padding-left: 15upx;
	}

	.tis-li .info .name {
		padding-top: 10upx;
		width: 100%;
		font-size: 32upx;
		color: #fff;
	}

	.tis-li .info .org {
		display: flex;
		color: #fff;
		margin-top: -20upx;
		font-size: 25upx;
	}

	.echartsIn {
		width: 100%;
		height: 350upx;
	}

	.grace-tab-title view {
		padding: 0 10px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-tab-current {
		border-bottom: 5rpx solid #417dc9 !important;
		color: #000;
		font-weight: bold;
		font-size: 45upx;
	}

	.grace-news-list-two {
		justify-content: space-between;
		width: 100%;
		display: flex;
		margin: 18upx 0;
		align-items: flex-start;
	}

	.grace-news-list-two image {
		width: 33%;
		margin: 0 1%;
	}

	.grace-news-list-title-main {
		font-size: 30upx;
	}

	.social-banner {
		width: 100%;
		display: flex;
		margin-bottom: 15upx;
	}

	.social-banner .social-banner-img {
		width: 90upx;
		height: 90upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.social-banner .social-banner-img image {
		width: 100%;
		border-radius: 100%;
	}

	.social-banner .social-banner-text {
		margin-top: 5upx;
	}

	.social-banner .social-banner-text .text-nickname {
		font-size: 34upx;
		color: #2F2F2F;
		font-weight: bold;
	}

	.social-banner .social-banner-text .text-description {
		color: #6b6b6b;
		font-size: 28upx;
	}

	.grace-rows view image {
		width: 50upx;
		height: 50upx;
	}

	.grace-rows-li {
		height: 60upx;
		line-height: 60upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.grace-rows-li .li-text {
		padding-left: 10upx;
	}

	.main-topic {
		color: #1874CD;
		margin: 0 4upx;
	}

	.grace-news-list-items {
		background-color: #F6F7F8;
	}

	.grace-news-list-items .grace-news-list-img {
		width: 120upx;
	}

	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-tab-title view {
		padding: 0 6px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}

	.grace-bg {
		background-color: #fff;
	}
</style>
